import React, { Component } from 'react';
import './Recommend.css'
//导入插件
import Swiper from 'swiper';
//导入样式
import "swiper/dist/css/swiper.min.css"
import Player from '../comnponents/player/Player'
class Recommend extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            pic:[],
            detail:[]
        }
    }
    
    componentDidMount(){
        this.$axios([{
            url:'banner'
        },{
            url:'personalized'
        }]).then(res=>{
            console.log(res);
            this.setState(state=>{
                return{
                    pic:res[0].banners,
                    detail:res[1].result
                }
            })
            //完成轮播图初始化
            this.initSwiper()
        })

    }
    initSwiper(){
        new Swiper('.swiper-container',{
            autoplay:true,
            loop:true,//设置循环播放
            pagination: { //开启分页器
                el: '.swiper-pagination',
            },
        })
    }
    goItem(i){
        this.props.history.push({
            pathname:'/item',
            params:{
                id:i
            }
        })
        
    }
    render() {
        return (
            <div className="swiper">
                <div className="before"></div>     
                <div className="swiper-container">
                    <div className="swiper-wrapper">
                        {this.state.pic.map((item,index)=>{
                            return (<div className="swiper-slide" key={index}>
                                <img src={item.imageUrl} alt="" />
                            </div>)
                        })}
                    </div>
                {/*如果需要分页器*/}
                    <div className="swiper-pagination"></div>
                </div>
                <h6>推荐歌单</h6>
                <ul>
                    {this.state.detail.map((item1,index1)=>{
                        // return (<li key={index1}>
                        return (<li key={index1} onClick={this.goItem.bind(this,item1.id)}>
                        <div className="position">
                            <i className="iconfont icon-erji"></i>
                            {item1.trackCount}万
                        </div>
                        <img src={item1.picUrl} alt="" />
                        <p className="p">{item1.name}</p>
                    </li>)
                    })}
                    
                </ul>
                <Player></Player>
            </div>
        );
    }
}

export default Recommend;